<template>
    <div class="table-container">
        <div class="scroll-content" ref="scrollContent">
            <table class="fixed-header-table">
                <thead>
                    <tr>
                        <th v-for="(item, i) in headers" :key="i">{{ item }}</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="(item, index) in displayedItems" :key="index">
                        <tr v-if="isBoolean">
                            <td>{{ item?.productionDate || '-' }}</td>
                            <td>{{ item.processingNum || '-' }}</td>
                            <td>{{ item.grossWeight || '-' }}</td>
                            <td>{{ item.netWeight || '-' }}</td>
                        </tr>
                        <tr v-else>
                            <td>{{ item.purchaseDate || '-' }}</td>
                            <td>{{ item.purchaseNum || '-' }}</td>
                            <td>{{ item.outboundNum || '-' }}</td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue';

const props = defineProps({
    headers: {
        type: Array,
        required: true
    },
    tableData: {
        type: Array,
        default: () => []
    },
    isBoolean: {
        type: Boolean,
        default: false
    }
});

const displayedItems:any = ref([...props.tableData]);
const scrollContent = ref(null);

const startAutoScroll = () => {
    const scrollHeight = scrollContent.value.scrollHeight;
    const containerHeight = scrollContent.value.clientHeight;

    let startTime = null;

    const scroll = (timestamp) => {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const duration = 5000;
        const progress = Math.min(elapsed / duration, 1);
        const ease = easeInOutQuad(progress);
        scrollContent.value.scrollTop = ease * (scrollHeight - containerHeight);

        if (progress < 1) {
            requestAnimationFrame(scroll);
        } else {
            scrollContent.value.scrollTop = 0;
            startAutoScroll();
        }
    };

    requestAnimationFrame(scroll);
};

const easeInOutQuad = (t) => {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
};

watch(() => props.tableData, (newData) => {
    displayedItems.value = [...newData];
}, { immediate: true });

onMounted(() => {
    nextTick(() => {
        startAutoScroll();
    });
});
</script>

<style scoped>
.table-container {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.scroll-content {
    max-height: 100%;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    will-change: scroll-position; /* 提高滚动性能 */
}

.fixed-header-table {
    width: 100%;
    border-collapse: collapse;
}

.fixed-header-table th,
.fixed-header-table td {
    padding: 8px;
    text-align: left;
    font-weight: 400;
    font-size: 11px;
}

.fixed-header-table thead th {
    font-weight: 500;
    font-size: 11px;
    background-color: #00143D;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.fixed-header-table tbody tr:nth-child(odd) {
    background-color: #163A6E;
}

.fixed-header-table tbody tr:nth-child(even) {
    background-color: #00143D;
}

.scroll-content::-webkit-scrollbar {
    display: none;
}

.scroll-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
</style>
